<!--
 * @Author: daiqisheng 3273889106@qq.com
 * @Date: 2023-02-10 15:47:15
 * @LastEditors: daiqisheng 3273889106@qq.com
 * @LastEditTime: 2023-05-05 17:33:13
 * @FilePath: \vite-demo\src\views\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index">
    <div class="index-navbar">
      <span class="title">考研陪伴平台</span>
      <span class="time">{{ time }}</span>
    </div>
    <div class="index-swipper">
      <el-carousel trigger="click" height="600px">
        <el-carousel-item v-for="item in banner_list" :key="item">
          <img class="width-100" :src="item.bannerUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="index-content">
      <div class="left">
        <el-affix :offset="20">
          <div class="outnav">
            <el-avatar :size="60" :src="user_form.avatar" />
            <span class="name">{{ name }}</span>
            <div class="row" @click="userinfo = true">
              <img class="icon" :src="user" alt="" />
              <span>信息管理</span>
            </div>
            <div class="row" @click="findPartner">
              <img class="icon" :src="partner" alt="" />
              <span>考研拍档</span>
            </div>
            <div class="row" @click="inmationMennage">
              <img class="icon" :src="info" alt="" />
              <span>留言管理</span>
            </div>
            <div class="row" @click="planlist">
              <img class="icon" :src="info" alt="" />
              <span>考研计划表</span>
            </div>
          </div>
        </el-affix>
      </div>
      <div class="main">
        <div class="main-infolist">
          <div class="title">
            <img class="icon" :src="infolisticon" alt="" />
            <span>资讯列表</span>
          </div>
          <div class="content">
            <div v-for="item in newlist.slice(0, 3)">
              <div class="row" @click="showDetail(item)">
                <img class="icon" :src="news" alt="" /><span>{{
                  item.title
                }}</span>
                <span>{{ item.createTime }}</span>
              </div>
            </div>
            <div v-for="item in newlist.slice(3, 6)">
              <div class="row" @click="showDetail(item)">
                <img class="icon" :src="news" alt="" /><span>{{
                  item.title
                }}</span>
                <span>{{ item.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="main-tabs">
          <el-tabs v-model="mainIndex" type="card" @tab-change="tabChange">
            <el-tab-pane label="问答广场"></el-tab-pane>
            <el-tab-pane label="资源分享"></el-tab-pane>
            <el-tab-pane label="考研广场"></el-tab-pane>
            <div>
              <el-tabs
                tab-position="left"
                class="main-tabs-left"
                :v-model="subIndex"
                @tab-change="subChange"
              >
                <el-tab-pane v-for="{ name } in subList" :label="name" />
                <div class="content" v-if="subIndex == '0'">
                  <div class="title" v-if="subList[subIndex]">
                    <img class="icon" :src="infolisticon" alt="" />
                    <span>{{ subList[subIndex].name }}</span>
                  </div>
                  <div class="content-main">
                    <div
                      class="row"
                      v-if="mainIndex == '1'"
                      v-for="item in total_list"
                    >
                      <img class="icon" :src="news" alt="" /><span>{{
                        item.fileName
                      }}</span>
                      <span>{{ item.userName }}</span>
                    </div>
                    <div
                      class="row"
                      v-else-if="mainIndex == '0'"
                      v-for="item in total_list"
                    >
                      <img class="icon" :src="news" alt="" /><span>{{
                        item.title
                      }}</span>
                      <span>{{ item.userName }}</span>
                    </div>
                    <div
                      class="row"
                      v-else-if="mainIndex == '2'"
                      v-for="item in total_list"
                    >
                      <img class="icon" :src="news" alt="" /><span>{{
                        item.userName
                      }}</span>
                      <span>{{ item.nowSchoolName }}</span>
                    </div>
                  </div>
                </div>
                <div class="content" v-if="subIndex == '1'">
                  <div class="title" v-if="subList[subIndex]">
                    <img class="icon" :src="infolisticon" alt="" />
                    <span>{{ subList[subIndex].name }}</span>
                  </div>
                  <div class="content-main">
                    <div class="row" v-for="item in my_list">
                      <img class="icon" :src="news" alt="" />
                      <span>具体的资讯项目</span>
                      <span>2023/02/01</span>
                    </div>
                  </div>
                </div>
                <div class="content" v-if="subIndex == '2'">
                  <div class="title" v-if="subList[subIndex]">
                    <img class="icon" :src="infolisticon" alt="" />
                    <span>{{ subList[subIndex].name }}</span>
                  </div>
                  <div class="content-main">
                    <div class="form" v-if="mainIndex == '0'">
                      <div class="form-row">
                        <div class="label">帖子名称</div>
                        <el-input v-model="inform['title']" />
                      </div>
                      <div class="form-row">
                        <div class="label">所属分类</div>
                        <el-select
                          v-model="inform['categoryId']"
                          class="m-2"
                          placeholder="请选择类目"
                        >
                          <el-option
                            v-for="item in category_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="form-row">
                        <div class="label">帖子内容</div>
                        <el-input
                          v-model="inform['content']"
                          type="textarea"
                          :rows="2"
                        />
                      </div>
                      <div class="form-row">
                        <el-button @click="handleSubmit">提交</el-button>
                      </div>
                    </div>
                    <div class="form" v-if="mainIndex == '1'">
                      <div class="form-row">
                        <div class="label">资源名称</div>
                        <el-input v-model="reform['name']" />
                      </div>
                      <div class="form-row">
                        <div class="label">所属类目</div>
                        <el-select
                          v-model="reform['categoryId']"
                          class="m-2"
                          placeholder="请选择类目"
                        >
                          <el-option
                            v-for="item in category_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="form-row">
                        <el-upload
                          class="upload-demo"
                          ref="upload"
                          :on-change="handelChange"
                          :http-request="uploadFile"
                          action="123123123123"
                          :file-list="fileList"
                          :limit="3"
                          :auto-upload="false"
                        >
                          <el-button slot="trigger" size="small" type="primary"
                            >选取文件</el-button
                          >
                        </el-upload>
                      </div>
                      <div class="form-row">
                        <el-button @click="handleSubmit">提交</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tabs>
            </div>
          </el-tabs>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <el-backtop :right="100" :bottom="100" />
    <div class="cover" v-if="show">
      <div class="login-form" v-if="login">
        <div>登录</div>
        <div class="row">
          <div class="label">用户名</div>
          <el-input v-model="login_form.username" />
        </div>
        <div class="row">
          <div class="label">密码</div>
          <el-input v-model="login_form.password" type="password" />
        </div>
        <div class="clickItem" @click="login = !login">没有帐户点击注册</div>
        <el-button type="primary" @click="loginForm">登录</el-button>
      </div>
      <div class="login-form" v-else>
        <div>注册</div>
        <div class="row">
          <div class="label">用户名</div>
          <el-input v-model="login_form.username" />
        </div>

        <div class="row">
          <div class="label">密码</div>
          <el-input v-model="login_form.password" type="password" />
        </div>
        <div class="clickItem" @click="login = !login">有账户点击登录</div>
        <el-button type="primary" @click="loginForm">注册</el-button>
      </div>
    </div>
    <div class="islogin" v-if="!isLogin" @click="checkLogin"></div>
    <!-- 用户信息 -->
    <div class="userinfo" v-if="userinfo" @click="userinfo = false">
      <div class="userinfo-form" @click.stop>
        <div class="row">
          <div class="label">用户头像</div>
          <div class="">
            <el-upload
              class="avatar-uploader"
              action="/file/uploadFiles"
              :show-file-list="false"
              :http-request="uploadAvator"
            >
              <img
                v-if="user_form.avatar"
                :src="user_form.avatar"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"></el-icon>
            </el-upload>
          </div>
        </div>
        <div class="row">
          <div class="label">用户昵称</div>
          <div class=""><el-input v-model="user_form.nickName" /></div>
        </div>
        <div class="row margin-top-10">
          <div class="label">性别</div>
          <div class="">
            <el-radio-group v-model="user_form.sex" class="ml-4">
              <el-radio label="0">女</el-radio>
              <el-radio label="1">男</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="row margin-top-10">
          <div class="label">原密码</div>
          <div class=""><el-input v-model="user_form.oldPassword" /></div>
        </div>
        <div class="row margin-top-10">
          <div class="label">新密码</div>
          <div class=""><el-input v-model="user_form.newPassword" /></div>
        </div>
        <div class="margin-top-10">
          <el-button type="primary" @click="submitInfo">提交</el-button>
        </div>
      </div>
    </div>
    <!-- 拍档 -->
    <div class="userinfo" v-if="partnerForm" @click="partnerForm = false">
      <div class="part" v-if="partner_form.userName" @click.stop>
        <div class="part-left">
          <div class="margin-top-10">
            拍档名称<span class="margin-left-10">{{
              partner_form.userName
            }}</span>
          </div>
          <div class="margin-top-10">
            目前专业<span class="margin-left-10">{{
              partner_form.nowMajorName
            }}</span>
          </div>
          <div class="margin-top-10">
            目前院校<span class="margin-left-10">{{
              partner_form.nowSchoolName
            }}</span>
          </div>
          <div class="margin-top-10">
            意向城市<span class="margin-left-10">{{
              partner_form.targetCity
            }}</span>
          </div>
          <div class="margin-top-10">
            期望学校<span class="margin-left-10">{{
              partner_form.targetSchoolName
            }}</span>
          </div>
          <div class="margin-top-10">
            期望专业<span class="margin-left-10">{{
              partner_form.targetMajorName
            }}</span>
          </div>
        </div>
        <div>
          <el-input
            v-model="sendMsg"
            type="textarea"
            @click.stop.native
            :rows="4"
          />
          <el-button
            class="margin-top-10"
            type="primary"
            @click="sendInfo(partner_form)"
            >发送留言</el-button
          >
        </div>
      </div>
      <div class="part" v-else @click.stop>
        暂未绑定考研拍档?<span class="invite" @click="toInvite"
          >快去邀请吧</span
        >
      </div>
    </div>
    <!-- 留言管理 -->
    <div class="userinfo" v-if="usermessage" @click="usermessage = false">
      <div class="message" @click.stop>
        <div class="message-content" v-for="(item, index) in message_list">
          <div v-if="!item.applyUserId">
            <div>
              发信人: <span>{{ item.fromName }}</span>
            </div>
            <div class="margin-top-5">
              <span>发信内容：</span>
              <div>
                {{ item.sendMsg }}
              </div>
            </div>
            <div class="margin-top-5">
              <span>回复内容：</span>
              <el-input
                v-model="item.reciveMsg"
                type="textarea"
                @click.stop.native
                :rows="2"
              />
              <el-button
                class="margin-top-5"
                @click.stop.native="sendMessage(item, index)"
                >回复</el-button
              >
            </div>
          </div>
          <div v-else>
            <div>
              邀请人: <span>{{ item.applyUserName }}</span>
            </div>
            <div>邀请内容: <span>可以成为我的考研拍档嘛？</span></div>
            <div v-if="item.matchFlag == 'null'">
              <el-button
                class="margin-top-5"
                type="success"
                @click.stop.native="inviteConfirm(item, true)"
                >接受</el-button
              >
              <el-button
                class="margin-top-5"
                type="danger"
                @click.stop.native="inviteConfirm(item, false)"
                >拒绝</el-button
              >
            </div>
            <div v-if="item.matchFlag == '0'">
              <el-button class="margin-top-5" type="danger" disabled
                >已拒绝</el-button
              >
            </div>
            <div v-if="item.matchFlag == '1'">
              <el-button class="margin-top-5" type="success" disabled
                >已接受</el-button
              >
            </div>
          </div>
        </div>
        <div class=""></div>
      </div>
    </div>
    <!-- 详情展示 -->
    <div class="userinfo" v-if="detail" @click="detail = false">
      <div @click.stop class="detail">
        <div>
          资讯名称：<span>{{ detail_form.title }}</span>
        </div>
        <div class="margin-top-5">
          创建时间:<span>{{ detail_form.createTime }}</span>
        </div>
        <div class="margin-top-5">
          资讯内容:
          <div>{{ detail_form.content }}</div>
        </div>
        <div class="margin-top-5">资讯图片:</div>
        <img class="coverPath" :src="detail_form.coverPath" alt="" />
      </div>
    </div>
    <!-- 考研计划表 -->
    <div class="userinfo" v-if="showplan" @click="showplan = false">
      <div @click.stop class="plan">
        <div class="row">
          <div>目前就读专业名称</div>
          <div>
            <el-input v-model="plan_form.nowMajorName" />
          </div>
        </div>
        <div class="row">
          <div>目前就读院校名称</div>
          <div>
            <el-input v-model="plan_form.nowSchoolName" />
          </div>
        </div>
        <div class="row">
          <div>意向院校城市</div>
          <div>
            <el-input v-model="plan_form.targetCity" />
          </div>
        </div>
        <div class="row">
          <div>备考专业代码</div>
          <div>
            <el-input v-model="plan_form.targetMajorCode" />
          </div>
        </div>
        <div class="row">
          <div>目标考研专业名称</div>
          <div>
            <el-input v-model="plan_form.targetMajorName" />
          </div>
        </div>
        <div class="row">
          <div>目标考研院校名称</div>
          <div>
            <el-input v-model="plan_form.targetSchoolName" />
          </div>
        </div>
        <div class="row">
          <el-button @click="submitPlan">发布</el-button>
        </div>
      </div>
    </div>
    <!-- 邀请表 -->
    <div class="userinfo" v-if="gotoinvite" @click="gotoinvite = false">
      <div class="gotoinvite" @click.stop>
        <div class="form">
          <div>
            <span>意向城市</span><el-input v-model="invite_form.targetCity" />
          </div>
          <div>
            <span>专业名称</span
            ><el-input v-model="invite_form.targetMajorName" />
          </div>
          <div>
            <span>学校名称</span
            ><el-input v-model="invite_form.targetSchoolName" />
          </div>
          <el-button @click="toInvite">查询</el-button>
        </div>
        <el-table :data="tableData" border>
          <el-table-column prop="userName" label="用户名" />
          <el-table-column prop="nowMajorName" label="目前专业" />
          <el-table-column prop="nowSchoolName" label="目前院校" />
          <el-table-column prop="targetCity" label="意向城市" />
          <el-table-column prop="targetSchoolName" label="期望学校" />
          <el-table-column prop="targetMajorName" label="期望专业" />
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="sendInvite(scope.row)"
                >发出邀请</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  inject,
  onMounted,
  nextTick,
  ref,
  getCurrentInstance,
} from "vue";
import { dayjs, ElMessage } from "element-plus";
import info from "@/assets/icons/info.svg";
import test from "@/assets/images/test.png";
import infolisticon from "@/assets/icons/infolist.svg";
import partner from "@/assets/icons/partner.svg";
import user from "@/assets/icons/user.svg";
import news from "@/assets/icons/news.svg";
export default {
  setup() {
    const request: any = inject("axios");
    let { ctx: that }: any = getCurrentInstance();
    const upload = ref<any>(null);
    const vuedata = reactive({
      info,
      test,
      infolisticon,
      partner,
      login: true,
      show: false,
      partnerForm: false,
      isLogin: false,
      userinfo: false,
      usermessage: false,
      showplan: false,
      messageLength: 0,
      // 打开邀请列表弹框
      gotoinvite: false,
      detail: false,
      invite_form: <any>{},
      plan_form: <any>{},
      detail_form: <any>{},
      sendMsg: <any>[],
      tableData: <any>[],
      name: sessionStorage.getItem("user")
        ? JSON.parse(sessionStorage.getItem("user")).nickName
        : "未登录",
      partner_form: <any>{},
      category_list: <any>[],
      newlist: <any>[],
      user_form: sessionStorage.getItem("user")
        ? JSON.parse(sessionStorage.getItem("user"))
        : <any>{},
      total_list: <any>[],
      my_list: <any>[],
      message_list: <any>[],
      login_form: {
        username: "",
        password: "",
      },
      inform: <any>{
        name: "", // 帖子名称
        content: "", // 帖子内容
      },
      reform: <any>{
        fileInfoList: [],
      },
      applylist: <any>[],
      user,
      news,
      time: "",
      infomessageList: <any>[],
      banner_list: <any>[],
      fileList: <any>[],
      mainIndex: "0",
      subIndex: "0",
      fileInfoList: <any>[],
      subList: <any>[],
      infoList: [
        {
          name: "帖子列表",
        },
        {
          name: "我的帖子",
        },
        {
          name: "发布帖子",
        },
      ],
      resourceList: [
        {
          name: "资源列表",
        },
        {
          name: "我的资源",
        },
        {
          name: "分享资源",
        },
      ],
      educationList: [
        {
          name: "计划广场",
        },
      ],
    });
    const showDetail = (data: any) => {
      vuedata.detail_form = data;
      vuedata.detail = true;
    };
    const findPartner = (data: any) => {
      let formdata = new FormData();
      formdata.append("userId", sessionStorage.getItem("userId"));
      request({
        method: "post",
        url: "/v2/partner/list",
        data: formdata,
      }).then(({ data: { rows } }: any) => {
        let arr = rows
          .filter((el) => el.matchFlag == "1")
          .filter((el) => el.applyUserId != sessionStorage.getItem("userId"));
        if (arr.length > 0) {
          let form = new FormData();
          form.append("userId", arr[0].applyUserId);
          request({
            method: "post",
            url: "/v2/plan/list",
            data: form,
          }).then(({ data: { rows } }) => {
            console.log(rows, "res");
            vuedata.partner_form = rows[0];
            vuedata.partnerForm = true;
          });
        } else {
          vuedata.partnerForm = true;
        }
      });
    };
    const sendInfo = () => {
      console.log(vuedata.partner_form.userId);
      console.log(sessionStorage.getItem("userId"));
      let obj = {
        toId: vuedata.partner_form.userId,
        toName: vuedata.partner_form.userName,
        fromName: vuedata.name,
        fromId: sessionStorage.getItem("userId"),
        sendMsg: vuedata.sendMsg,
      };

      let arr = [];
      if (localStorage.getItem("message_list")) {
        arr.push(...JSON.parse(localStorage.getItem("message_list")));
      }
      arr.push(obj);
      localStorage.setItem("message_list", JSON.stringify(arr));
      ElMessage({
        message: "发送成功",
        type: "success",
      });
    };
    const sendInvite = ({ userId }: any) => {
      let formdata = new FormData();
      formdata.append("userId", userId);
      request({
        method: "post",
        url: "/v2/partner/apply",
        data: formdata,
      }).then(({ data }: any) => {
        if (data.code == 0) {
          ElMessage({
            message: data.msg,
            type: "success",
          });
        } else {
          ElMessage({
            message: data.msg,
            type: "error",
          });
        }
      });
    };

    const submitPlan = () => {
      request({
        method: "post",
        url: "/v2/plan/addOrSave",
        data: {
          ...vuedata.plan_form,
          userId: sessionStorage.getItem("userId"),
        },
      }).then(({ data }: any) => {
        if (data.code == 0) {
          vuedata.showplan = false;
          ElMessage({
            message: data.msg,
            type: "success",
          });
        }
      });
    };
    const init = () => {
      if (sessionStorage.getItem("token")) {
        vuedata.isLogin = true;
      }
      vuedata.subList = vuedata.infoList;
      vuedata.time = dayjs().format("YYYY年MM月DD日 hh:mm:ss");
      setInterval(() => {
        vuedata.time = dayjs().format("YYYY年MM月DD日 hh:mm:ss");
      }, 1000);
      infoMesage();
      totalMessage();
      bannerMessage();
      categoryinit();
      messageinit();
    };
    const messageinit = () => {
      setInterval(() => {
        if (sessionStorage.getItem("userId")) {
          let arr = JSON.parse(localStorage.getItem("message_list"));
          if (arr && arr.length) {
            if (vuedata.messageLength != arr.length) {
              vuedata.messageLength = arr.length;
              vuedata.infomessageList = arr.filter(
                (el) => el.toId == sessionStorage.getItem("userId")
              );
              console.log(vuedata.infomessageList, "vuedata.infomessageList");
            }
          }
        }
      }, 2000);
    };
    const planlist = () => {
      vuedata.showplan = true;
      let formdata = new FormData();
      formdata.append("userId", sessionStorage.getItem("userId"));
      request({
        method: "post",
        url: "/v2/plan/list",
        data: formdata,
      }).then(({ data: { rows } }: any) => {
        if (rows.length > 0) {
          vuedata.plan_form = rows[0];
        }
      });
    };

    const categoryinit = () => {
      request({
        method: "post",
        url: "/education/category/list",
      }).then(({ data: { list } }: any) => {
        console.log(list, "list");
        let arr: any = [];
        list.forEach((element: any) => {
          if (element.children) {
            arr.push(...element.children);
          }
        });
        vuedata.category_list = arr;
        console.log(arr);
      });
    };
    const inviteConfirm = (row: any, flag: any) => {
      let formdata = new FormData();
      formdata.append("id", row.id);
      if (flag) {
        request({
          method: "post",
          url: "/v2/partner/agree",
          data: formdata,
        }).then(({ data }: any) => {
          if (data.code == 0) {
            ElMessage({
              message: "接受成功",
              type: "success",
            });
            inmationMennage();
          } else {
            ElMessage({
              message: data.msg,
              type: "error",
            });
          }
        });
      } else {
        request({
          method: "post",
          url: "/v2/partner/reject",
          data: formdata,
        }).then(({ data }: any) => {
          if (data.code == 0) {
            ElMessage({
              message: "拒绝成功",
              type: "success",
            });
            inmationMennage();
          } else {
            ElMessage({
              message: data.msg,
              type: "error",
            });
          }
        });
      }
    };
    const toInvite = () => {
      vuedata.gotoinvite = true;
      if (!vuedata.gotoinvite) {
        vuedata.gotoinvite = true;
      }
      let formdata = new FormData();
      Object.keys(vuedata.invite_form).forEach((el: any) => {
        formdata.append(el, vuedata.invite_form[el]);
      });
      request({
        method: "post",
        url: "/v2/plan/list",
        data: formdata,
      }).then(({ data: { rows } }: any) => {
        vuedata.tableData = rows;
        console.log(vuedata.tableData, " vuedata.tableData");
      });
    };
    const submitInfo = () => {
      request({
        method: "put",
        url: "system/user/profile/updateFront",
        data: {
          userId: sessionStorage.getItem("userId"),
          nickName: vuedata.user_form.nickName,
          sex: vuedata.user_form.sex,
        },
      }).then(({ data }: any) => {
        vuedata.name = vuedata.user_form.nickName;
        vuedata.userinfo = false;
      });
      if (vuedata.user_form.oldPassword && vuedata.user_form.newPassword) {
        let formdata = new FormData();
        formdata.append("oldPassword", vuedata.user_form.oldPassword);
        formdata.append("newPassword", vuedata.user_form.newPassword);
        request({
          method: "put",
          url: "system/user/profile/updatePwd",
          data: formdata,
        }).then(({ data }: any) => {
          if (data.code == 0) {
            console.log(data, "data");
            sessionStorage.clear();
            vuedata.user_form = {};
            vuedata.name = "未登录";
            vuedata.isLogin = false;
            ElMessage({
              message: "修改成功",
              type: "success",
            });
          } else {
            ElMessage({
              message: data.msg,
              type: "error",
            });
          }
        });
      }
    };
    const uploadAvator = (data: any) => {
      console.log(data, "res");
      let formdata = new FormData();
      formdata.append("avatarfile", data.file);
      request({
        method: "post",
        url: "system/user/profile/avatar",
        data: formdata,
      }).then(({ data: { data } }: any) => {
        nextTick(() => {
          vuedata.user_form = {
            ...vuedata.user_form,
            avatar: data.url,
          };
          sessionStorage.setItem("user", JSON.stringify(vuedata.user_form));
          that.$forceUpdate();
        });
      });
    };
    const bannerMessage = () => {
      request({
        method: "post",
        url: "/education/banner/list",
      }).then(({ data: { rows } }: any) => {
        vuedata.banner_list = rows.filter((el: any) => el.isEnabled == 1);
      });
    };
    const totalMessage = () => {
      switch (vuedata.mainIndex) {
        // 1 是资源分享
        case "1":
          request({
            method: "post",
            url: "/education/file/list",
          }).then(({ data: { rows } }: any) => {
            vuedata.total_list = rows.filter((el: any) => el.verFlag == "1");
          });
          break;
        // 1 是考研广场
        case "2":
          request({
            method: "post",
            url: "/v2/plan/list",
          }).then(({ data: { rows } }: any) => {
            vuedata.total_list = rows;
            console.log(vuedata.total_list,'vuedata.total_list');
          });
          break;
        // 默认是问答广场
        default:
          request({
            method: "post",
            url: "/education/forum/list",
          }).then(({ data: { rows } }: any) => {
            vuedata.total_list = rows.filter((el: any) => el.verFlag == "1");
          });
          break;
      }
    };
    const sendMessage = (row: any, index: Number) => {
      console.log(row, index, "row");
      let obj = {
        toId: row.fromId,
        toName: row.fromName,
        fromName: row.toName,
        fromId: row.toId,
        sendMsg: row.reciveMsg,
      };
      let arr = [];
      if (localStorage.getItem("message_list")) {
        arr.push(...JSON.parse(localStorage.getItem("message_list")));
      }
      arr.push(obj);
      localStorage.setItem("message_list", JSON.stringify(arr));
      ElMessage({
        message: "发送成功",
        type: "success",
      });
    };
    const infoMesage = () => {
      request({
        method: "post",
        url: "/education/news/newsList",
      }).then(({ data: { rows } }: any) => {
        vuedata.newlist = rows.map((el: any) => ({
          ...el,
          createTime: dayjs(el.createTime).format("YYYY-MM-DD"),
        }));
      });
    };
    const uploadFile = () => {};
    const handelChange = (file: any, fileList: any) => {
      vuedata.fileList = fileList;
    };
    const inmationMennage = () => {
      if (!vuedata.usermessage) {
        vuedata.usermessage = true;
      }
      let formdata = new FormData();
      formdata.append("userId", sessionStorage.getItem("userId"));
      request({
        method: "post",
        url: "/v2/partner/list",
        data: formdata,
      }).then(({ data: { rows } }: any) => {
        vuedata.applylist = rows;
        vuedata.message_list = [
          ...vuedata.infomessageList,
          ...vuedata.applylist,
        ];
      });
    };
    const checkLogin = () => {
      let token = sessionStorage.getItem("token");
      if (token) {
        vuedata.isLogin = true;
      } else {
        vuedata.show = true;
      }
    };
    const handleSubmit = async () => {
      if (vuedata.mainIndex == "1") {
        // 资源分享的提交
        console.log(vuedata.fileList);
        let formdata = new FormData();
        vuedata.fileList.forEach((el: any) => {
          formdata.append("files", el.raw);
        });
        let res = await request({
          method: "post",
          url: "/file/uploadFiles",
          header: {
            token: sessionStorage.getItem("token"),
          },
          data: formdata,
        });
        console.log(res.data.groupId, "res");
        request({
          method: "post",
          url: "/v2/file/saveOrUpdate",
          header: {
            token: sessionStorage.getItem("token"),
          },
          data: {
            userId: sessionStorage.getItem("userId"),
            name: vuedata.reform.name,
            categoryId: vuedata.reform.categoryId,
            fileGroupId: res.data.groupId,
          },
        }).then((data: any) => {
          console.log(data, "data");
          ElMessage({
            message: "上传成功",
            type: "success",
          });
        });
      } else if (vuedata.mainIndex == "0") {
        // 资源分享的提交
        request({
          method: "post",
          url: "/v2/forum/add",
          data: {
            title:vuedata.inform.title,
            userId: sessionStorage.getItem("userId"),
            content: vuedata.inform.content,
           categoryId: vuedata.inform.categoryId,
          },
        }).then((data: any) => {
          console.log(data, "data");
          ElMessage({
            message: "上传成功",
            type: "success",
          });
        })
      }
    };
    const loginForm = () => {
      console.log(vuedata.login);
      console.log(vuedata.login_form);
      if (!vuedata.login) {
        request({
          method: "post",
          url: "/v2/auth/register",
          data: vuedata.login_form,
        }).then(({ data }: any) => {
          console.log(data, "data");
          if (data.code === 0) {
            ElMessage({
              message: "注册成功",
              type: "success",
            });
            vuedata.login = !vuedata.login;
          } else {
            ElMessage({
              message: data.msg,
              type: "error",
            });
          }
        });
      } else {
        request({
          method: "post",
          url: "/v2/auth/login",
          data: vuedata.login_form,
        }).then(({ data }: any) => {
          if (data.code === 0) {
            ElMessage({
              message: "登录成功",
              type: "success",
            });
            vuedata.show = false;
            vuedata.isLogin = true;
            request({
              method: "get",
              url: "/getFrontInfo",
              data: vuedata.login_form,
            }).then((res: any) => {
              vuedata.name = res.data.user.nickName;
              vuedata.user_form = res.data.user;
              sessionStorage.setItem("userId", res.data.user.userId);
              sessionStorage.setItem("user", JSON.stringify(res.data.user));
            });
            sessionStorage.setItem("token", data.token);
          } else {
            ElMessage({
              message: data.msg,
              type: "error",
            });
          }
        });
      }
    };

    const tabChange = (index: any) => {
      nextTick(() => {
        vuedata.mainIndex = index;
        totalMessage();
      });
      switch (index) {
        case "1":
          vuedata.subList = vuedata.resourceList;
          break;
        case "2":
          vuedata.subList = vuedata.educationList;
          break;
        default:
          vuedata.subList = vuedata.infoList;
          break;
      }
      if (!vuedata.subList[vuedata.subIndex]) {
        vuedata.subIndex = "2";
      }
    };
    const subChange = (index: any) => {
      nextTick(() => {
        vuedata.subIndex = index;
      });
    };
    onMounted(() => {
      init();
    });
    return {
      tabChange,
      toInvite,
      subChange,
      handleSubmit,
      uploadFile,
      handelChange,
      loginForm,
      checkLogin,
      submitInfo,
      sendMessage,
      inviteConfirm,
      showDetail,
      uploadAvator,
      submitPlan,
      planlist,
      sendInvite,
      inmationMennage,
      findPartner,
      sendInfo,
      ...toRefs(vuedata),
      upload,
    };
  },
};
</script>

<style lang="scss" scoped>
.margin-left-10 {
  margin-left: 10px;
}
.margin-top-5 {
  margin-top: 5px;
}
.margin-top-10 {
  margin-top: 20px;
}
.width-100 {
  width: 100%;
  height: 100%;
}
.userinfo {
  background: transparent;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
    border: 1px dotted #8c939d;
  }
  .detail {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 40px;
  }
  .message {
    height: 500px;
    width: 500px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    overflow: scroll;
    &-content {
      margin-top: 10px;
      padding: 10px;
      box-shadow: 1px 1px 4px 4px #f1f1f1;
    }
  }
  .part {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    display: grid;
    padding: 20px;
    gap: 10px;
    align-items: center;
    min-height: 200px;
    min-width: 200px;
    grid-template-columns: repeat(2, 1fr);
    &-left {
      border-right: 1px solid #f1f1f1;
    }
    .invite {
      cursor: pointer;
      color: #1296db;
      text-decoration: underline;
    }
  }
  .plan {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    display: grid;
    padding: 20px;
    gap: 10px;
    align-items: center;
    .row {
      display: grid;
      grid-template-columns: 150px 1fr;
    }
  }
  .gotoinvite {
    background: #fff;
    width: 900px;
    padding: 20px;
    border-radius: 10px;
    .form {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      margin-bottom: 20px;
    }
  }
  .coverPath {
    width: 100px;
  }
  &-form {
    width: 600px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    .row {
      display: grid;
      grid-template-columns: 120px 1fr;
    }
  }
}
.avator {
  width: 60px;
  height: 60px;
  border-radius: 100%;
}

.icon {
  width: 20px;
  margin-right: 10px;
}
.islogin {
  background: transparent;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}
.cover {
  background: #00000080;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-form {
    width: 300px;
    height: 300px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 1px 1px 3px 4px #f1f1f1;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;

    .clickItem {
      color: #1296db;
      font-size: 12px;
      margin-bottom: 10px;
      text-decoration: underline;
      cursor: pointer;
    }

    .row {
      margin-top: 10px;
      margin-bottom: 10px;

      .label {
        margin-bottom: 5px;
      }
    }
  }
}

.index {
  background: #87cefa60;
  min-height: 100vh;
  padding-bottom: 40px;

  &-navbar {
    height: 60px;
    box-shadow: 0px 1px 4px 4px #87cefa60;
    border: 1px solid #87cefa80;
    padding: 20px;
    box-sizing: border-box;
    color: #222;
    display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: center;
    font-size: 32px;
    color: #1296db;
    text-shadow: 1px 1px 8px #63b8ff80;
    position: relative;
    background: #87cefa90;
    z-index: 2;

    .time {
      font-size: 20px;
      position: absolute;
      right: 10%;
      top: 50%;
      transform: translate(0%, -50%);
    }
  }

  &-swipper {
    position: relative;
    width: 80%;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    z-index: 2;

    :deep .el-carousel__indicators {
      display: none;
    }
  }

  &-content {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    z-index: 2;

    .left {
      .outnav {
        background: #ffffff90;
        position: relative;
        left: 40%;
        box-sizing: border-box;
        box-shadow: 2px 1px 4px 4px #87cefa60, 1px 1px 4px 3px #fff inset;
        border-radius: 10px;
        padding: 20px;
        width: 200px;

        .row {
          box-sizing: border-box;
          background: #fff;
          border-radius: 20px;
          border: 1px solid #87cefa80;
          box-shadow: 1px 1px 1px 1px #87cefa60;
          padding: 6px;
          padding-left: 20px;
          cursor: pointer;
          margin-top: 10px;
          display: flex;
          align-items: center;

          span {
            font-size: 14px;
          }
        }

        .name {
          position: absolute;
          right: 24%;
          top: 16%;
          font-weight: bold;
        }
      }
    }

    .main {
      background: #ffffff90;
      position: relative;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
      border-radius: 10px;
      box-shadow: 2px 1px 4px 4px #87cefa60, 1px 1px 4px 3px #fff inset;

      &-infolist {
        box-sizing: border-box;
        padding: 20px;
        border: 1px solid #87cefa;
        border-radius: 10px;
        width: 100%;

        .title {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 22px;
          color: #1296db;
          padding-bottom: 10px;
          border-bottom: 1px solid #87cefa;
        }

        .content {
          box-sizing: border-box;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
          margin-top: 10px;

          .row {
            grid-template-columns: 30px 2fr 1fr;
            display: grid;
            align-items: center;
            grid-template-rows: 40px;
            border-bottom: 1px solid #87cefa;
          }

          .row:last-child {
            border-bottom: 1px solid #87cefa;
          }
        }
      }

      &-tabs {
        margin-top: 20px;
        width: 100%;
        height: 400px;
        border: 1px solid #87cefa;
        border-radius: 10px;

        &-left {
          height: 328px;

          .content {
            width: 96%;
            padding: 10px;
            height: 325px;
            box-sizing: border-box;

            &-main {
              display: grid;
              grid-template-columns: 1fr 1fr;

              .form {
                width: 110%;
                padding: 10px;

                &-row {
                  margin-top: 5px;

                  .label {
                    margin-bottom: 5px;
                  }
                }
              }

              .row {
                grid-template-columns: 30px 1fr 1fr;
                display: grid;
                align-items: center;
                grid-template-rows: 40px;
                border-bottom: 1px solid #87cefa;
              }

              .row:last-child {
                border-bottom: 1px solid #87cefa;
              }
            }

            .title {
              display: flex;
              align-items: center;
              font-weight: bold;
              font-size: 16px;
              padding-bottom: 10px;
              border-bottom: 1px solid #87cefa;
            }
          }
        }
      }
    }
  }

  &::after {
    position: absolute;
    content: "aa";
    left: 0;
    top: 0;
    width: 100%;
    background: url("@/assets/images/water.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 1480px;
    filter: blur(2px);
  }
}
</style>
